$mq-col2: $mq-col2-uniboard;

.puz-side {
  @extend %box-neat;

  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: $c-bg-box;
  margin: 0;
  padding: 2vh 2vw;

  @include breakpoint($mq-col2) {
    padding: 3vh 2vw;

    .playing.zen & {
      justify-content: space-evenly;
    }
  }

  &__top {
    flex: 0 0 25%;
    display: flex;
    flex-flow: row nowrap;

    &::before {
      content: ' ';
      width: 5rem;
      height: 5rem;
      background-image: img-url('icons/tornado.svg');
      background-repeat: no-repeat;
      margin-right: 1.5rem;
    }
  }

  &__table {
    @extend %flex-column;

    flex: 0 0 25%;
    justify-content: flex-end;
  }

  &__control {
    @extend %flex-center;

    justify-content: flex-end;
    height: 2.5em;
    margin-bottom: 0.2em;

    .button {
      color: $c-font-dim;
      padding: 0.5em 1.5em;
    }
  }

  &__start {
    color: $c-brag;
    margin: auto;

    @include breakpoint($mq-col2) {
      margin: 0;
    }

    &__text {
      @extend %flex-column;

      strong {
        font-size: 2em;
        font-weight: normal;

        @include breakpoint($mq-col2) {
          font-size: 2.2em;
        }
      }

      span {
        @extend %roboto;

        letter-spacing: 0.1em;

        @include breakpoint($mq-col2) {
          font-size: 1.5em;
          letter-spacing: 0.2em;
        }
      }
    }
  }

  &__solved {
    text-align: center;
    white-space: nowrap;

    &__text {
      font-family: 'storm';
      font-size: 5.5rem;
      color: $c-brag;
      margin-right: 1rem;
      transition: text-shadow 0.1s;
    }

    .puz-mod-puzzle & {
      text-shadow: 0 0 15px white;
    }
  }
}
